<template>
  <div>
    <el-tooltip
      :content="content"
      placement="top-start"
      :open-delay="600"
      :visible-arrow="false"
      popper-class="atooltip"
      :disabled="disabled"
    >
      <div class="col" :class="myClass">
        <span v-if="label" class="label">{{ label }}</span>
        <slot name="label" />
        <div class="content" @mouseover="onMouseOver(refName)">
          <span v-if="content" :ref="refName">{{ content }}</span>
        </div>
        <slot name="content" />
      </div>
    </el-tooltip>
  </div>
</template>

<script>
export default {
  props: {
    label: {
      type: String,
      default: ''
    },
    content: {
      type: String,
      default: ''
    },
    size: {
      type: String,
      default: 'default'
    },
    actived: {
      type: Boolean,
      default: false
    },
    refName: {
      type: String,
      default: () => {
        return ''
      }
    }
  },
  data() {
    return {
      disabled: true
    }
  },
  computed: {
    myClass() {
      return this.actived ? `${this.size} actived` : `${this.size}`
    }
  },
  methods: {
    onMouseOver(str) {
      // console.log(str)
      // 父组件宽度
      const parentWidth = this.$refs[str].parentNode.offsetWidth
      // console.log('parentWidth--', parentWidth)
      // 当前实际宽度
      const contentWidth = this.$refs[str].offsetWidth
      // console.log('contentWidth--', contentWidth)
      // 判断是否开启tooltip功能
      if (contentWidth > parentWidth) {
        this.disabled = false
      } else {
        this.disabled = true
      }
    }
  }

}
</script>
<style>
  .atooltip {
    background: rgba(0, 0, 0, 0.6) !important;
    font-size: 1.5rem;
  }
</style>
<style lang="scss" scoped>
.col {
  margin: 0 1.0rem;
  display: flex;
  flex-direction: column;
  &.default {
    width: 19.0rem;
    height: 6.4rem;
  }
  &.mini {
    width: 15rem;
  }
  &.c-main {
    width: 20.1rem;
    height: 6.4rem;
  }
  .label {
    font-size: 1.6rem;
    font-weight: 400;
    color: $explainText;
    margin: 0;
  }
  .content {
    font-size: 1.8rem;
    font-weight: 500;
    margin: 0;
    color: $importantText;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  &.actived .content{
    color: $blueColor;
  }
}
</style>
